<template>
  <div>
    <el-row v-for="contentItem in contentInfo" class="container">
      <el-col :span="12" class="char-container">
        <div class="char-desc">
          <h3>{{contentItem.title}}</h3>
          <div class="desc-text">{{contentItem.desc}}</div>
          <a class="link-more" :href="contentItem.link">
            more
            <el-icon><arrow-right-bold /></el-icon>
          </a>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="img-container">
          <img class="item-img" :src="contentItem.img" :alt="contentItem.alt">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {ArrowRightBold} from "@element-plus/icons-vue";

export default {
  name: "ContentItem",
  components: {
    ArrowRightBold
  },
  props: {
    contentInfo: {
      type: Array,
      default: []
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  margin-top: 50px;
}

.char-container {
  padding-right: 30px;
  padding-left: 30px;

  .char-desc {
    position: relative;
    top: 20%;
    display: inline-block;
    text-align: left;

    .desc-text {
      margin: 18px auto 12px;
    }

    .link-more {
      font-size: 18px;
      display: block;
      text-align: right;

      .el-icon {
        font-size: 13px;
        vertical-align: center;
      }
    }
  }
}

.img-container {
  width: 300px;
  height: 300px;

  .item-img {
    width: 100%;
    height: 100%;
  }
}
</style>